@use '../../_styles/mixin.scss' as *;
@use './var.scss';

.o-rate {
  display: inline-flex;
  align-items: center;
  user-select: none;
  font-size: var(--rate-size);
  cursor: pointer;
}

.o-rate-readonly {
  cursor: auto;
}

.o-rate-item {
  position: relative;

  &.is-half {
    .o-rate-icon-top {
      opacity: 1;
    }
  }

  &.is-full {
    .o-rate-icon-bottom {
      color: var(--rate-color-selected);
    }
  }

  & + .o-rate-item {
    margin-left: var(--rate-gap);
  }
}

.o-rate-icon {
  color: var(--rate-color);
  transition: all var(--o-duration-m1) var(--o-easing-standard);
}

.o-rate-icon-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  opacity: 0;
  overflow: hidden;
  color: var(--rate-color-selected);
}

.o-rate-popover {
  border-radius: var(--rate-popover-radius);
  .o-popover-body {
    color: var(--rate-popover-color);
    font-size: var(--rate-popover-text-size);
    line-height: var(--rate-popover-text-height);
    padding: var(--rate-popover-padding);
    min-width: auto;
  }
}
